<template>
  <div style="width: 100%; height: 100%">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="请求参数" name="first">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto">
          <div style="width: 100%; display: flex; font-size: 14px">
            <div style="width: 180px; padding: 2px 5px">参数名称</div>
            <div style="width: 120px; padding: 2px 5px">必填</div>
            <div style="padding: 2px 5px; width: 100%">示例值</div>
            <div style="width: 200px; padding: 2px 5px; display: flex; justify-content: space-between; align-items: center">
              <div>说明</div>
              <div><el-button type="primary" size="small">批量录入</el-button></div>
            </div>
            <div style="width: 30px; padding: 2px"></div>
          </div>
          <div style="width: 100%; display: flex">
            <div style="width: 180px; padding: 2px 5px"><el-input size="default" /></div>
            <div style="width: 120px; padding: 2px 5px">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div style="text-align: center; padding: 2px 5px; width: 100%">
              <el-input></el-input>
            </div>
            <div style="width: 200px; text-align: center; padding: 2px 5px">
              <el-input></el-input>
            </div>
            <div style="width: 30px; text-align: center; padding: 2px; text-align: center">
              <el-icon class="remove"><Delete /></el-icon>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="参数说明" name="second"> </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
defineOptions({
  name: 'InputParam',
});
const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const value = ref('');

const options = [
  {
    value: 'Option1',
    label: '必填',
  },
  {
    value: 'Option2',
    label: '非必填',
  },
];
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
.remove {
  cursor: pointer;
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 18px;
}
.remove:hover {
  cursor: pointer;
  color: red;
}
</style>
